<template>
  <!-- 审核人模块 -->
  <div class="box">
    <div class="normal_con" >
      
      <el-popover
        ref="popover"
        placement="right"
        :title="approveName"
        width="240"
        trigger="hover"
        popper-class="person_popover"
      >
        <p class="titTab">审核方式：</p>
        <p class="popText" v-if="info.auditType.length==0" >暂未选择</p>
        <p class="popText" v-else>{{info.auditType.join(',')}}</p>
        <p class="titTab">审核人员：</p>
        <p class="popText" v-if="info.userIdList.length>0"><span v-for="item in info.userIdList" :key="item.id">{{item.name}}&nbsp;&nbsp;</span></p>
        <p class="popText" v-else><span >暂未选择</span></p>
      </el-popover>
      <div :class="[csrClass, stateClass]" v-popover:popover>
        <div class="title">
          <div>
            <i class="el-icon-user"></i>
            <input class="approveName" @blur="changeName" type="text" v-model="approveName" :disabled='isDisabled'>
          </div>
          <span v-if="stateClass=='Ongoing'" >进行中</span>
          <i class="el-icon-close close" @click='delApprove(info)' v-show='!showZZ'></i>
        </div>
        <div class="cen"  @click.stop="showDrawer(info)">
          <div class="cenText" v-if='info.userIdList&&info.userIdList.length>0'>
            <p v-for='(item,index) in info.userIdList' :key='item.id' > 
              <span v-if="index<=1">{{item.name}}</span>
              <span v-if="info.userIdList.length>2&&index==0">,</span>
              <span v-if="info.userIdList.length>2&&index==1">......</span>
            </p>
          </div>
          <div class="cenText" v-if='!info.userIdList||info.userIdList.length==0' style='color:red'>
            请选择审核人
          </div>
          <div class="icon">
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
        
      </div>
      <div class="CC_lin" v-if="info.csr&&info.csr.length>0"></div>
      <!-- 抄送人 -->
      <div class="CC" :class="[ stateClass]" v-if="info.csr&&info.csr.length>0">
        <div class="CC_box">
          <div class="title">
            <div>
              <i class="el-icon-user"></i>
              <input class="makeName" type="text" v-model="makeName" :disabled='isDisabled'>
            </div>
            <i class="el-icon-close close" @click="delCC(info)" v-show='!showZZ'></i>
          </div>
          <div class="cen" @click='showCC'>
            <div class="cenText">
              <p v-for='(item,index) in info.csr' :key='item+(index+"")' > 
                <span v-if="index<=1">{{item.name}}</span>
                <span v-if="info.csr.length>2&&index==0">,</span>
                <span v-if="info.csr.length>2&&index==1">......</span>
              </p>
            </div>
            <div class="icon">
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <add :nodeInfo='info'></add>
    <approverDrawer @hideAppr='hideAppr' :showAppr='showAppr' :nodeInfo='info'></approverDrawer>
    <copyerDrawer @hideCopy='hideCopy' :showCopy='isShowCC' :nodeInfo='info'></copyerDrawer>  
  </div>
</template>

<script>
import add from '../addNode.vue' // 新增节点组件
import make from './make.vue' // 新增节点组件
import approverDrawer from '@/components/drawer/approverDrawer' // 审核人设计弹框
import copyerDrawer from '@/components/drawer/copyerDrawer' // 抄送人设计弹框
import { mapState, mapMutations } from 'vuex'
export default {
  components:{
    add,
    make,
    approverDrawer,
    copyerDrawer
  },
  props:['info'],
  data(){
    return {
      cenText:[],
      approveName:'',
      isDisabled:false,
      makeName:'抄送人',
      showAppr:false,
      makeUserList:[],
      isShowCC:false,
      // overList:[],
      // OngoingList:[],
      csrClass:'ini_box',
      stateClass:''
    }
  },
  computed:{
    ...mapState({
      dataList: state => state.dataList,
      overList: state => state.overList,
      OngoingList: state => state.OngoingList,
      showZZ: state => state.showZZ,
    })
  },
  watch:{
    
    makeUserList: {
      handler(newVal){
        // console.log(this.info.csr)
        // if(!this.info.csr){
        //   this.info.csr = []
        //   this.info.csr.splice(0,this.info.csr.length,...newVal)
        // }else{
        //   this.info.csr.splice(0,this.info.csr.length,...newVal)
        // }
        this.info.csr = newVal
        if(this.info.csr&&this.info.csr.length>0){
          this.csrClass = 'ini_box'
        }else{
          this.csrClass = 'ini_box1'
        }
      },
      deep:true
    },
  },
  mounted(){
    this.approveName = this.info.name
    if(this.info.csr&&this.info.csr.length>0){
      this.csrClass = 'ini_box'
    }else{
      this.csrClass = 'ini_box1'
    }
    let OngoingList = []
    this.OngoingList.forEach(item=>{
      OngoingList.push(item.key)
    })
    // console.log(this.info.key,'------------绑定类名0--------------')
    if(OngoingList.indexOf(this.info.key+'')!=-1){
      console.log('---------1------------')
      this.stateClass = 'Ongoing'
    }else if(this.overList.indexOf(this.info.key+'')!=-1){
      console.log('---------2------------')
      this.stateClass = 'overClass'
    }else{
      console.log('---------3------------')
      this.stateClass = ''
    }
    
  },
  methods:{
    ...mapMutations([
      'setApprover'
    ]),
    delCC(infoData){
      this.$confirm('确定要删除此节点下所有的抄送人么?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          infoData.csr = null
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
                   
        });
    },
    delApprove(infoData){
      this.recurrenceFun(this.dataList,infoData)
    },
    recurrenceFun(list,infoData){
      list.forEach((item,index) => {
        if(item.children&&item.children.length>0){ // 有children的时候要递归循环
          this.recurrenceFun(item.children,infoData)
        }else{ // 没有children就正常判断找id
          if(item.stepId==infoData.stepId){ 
            if(index==list.length-1&&index!=0){ // 如果是线路最后一个直接删除末尾元素
              list[index-1].isEnd = 1
              list.pop()
              console.log(this.dataList,'------------删除后处理后的数据---------')
            }else if(index==0&&list.length==1){  // 如果是线路第一个直接删除第一个元素
              if(list.length==1){
                // this.$message.error('每条线路最少保存一个审核人，如需删除请直接删除线路');
                this.$emit('delLin',infoData.prevStepId)
              }else{
                list.shift()
              }
            }else if(index==0&&list.length>1){
              list[index+1].prevStepId = list[index].prevStepId
              list.shift()
            }else { // 删除元素在中间的时候要进行prev的赋值等操作
              list[index+1].prevStepId = list[index-1].stepId
              list.splice(index,1)
            }
            
          }
        }
      });
    },
    showDrawer(){
      this.showAppr = true
    },
    hideAppr(){
      this.showAppr = false
    },
    changeName(){
      this.info.name = this.approveName  //偷懒写法，不建议这样搞，会导致数据流向是混乱的
      console.log(this.dataList[1])
    },
    showCC(){ //展示抄送人设置模块
      this.isShowCC = true 	
    },
    hideCopy(){
      this.isShowCC = false
    }
  }
}
</script>

<style scoped>
.box{
  position: relative;
}
.normal_con{
  display: flex;
  align-items: center;
  justify-content: center;
}
.ini_box{
  width: 240px;
  height: 100px;
  border: 1px solid #ccc;
  /* margin: 0 auto; */
  margin-left: 400px;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
}
.Ongoing{
  border: 1px solid #47f11d !important;
  box-shadow: 0 0 10px #47f11d !important;
}
.overClass{
  filter:grayscale(100%);
}
.ini_box1{
  width: 240px;
  height: 100px;
  border: 1px solid #ccc;
  border-radius: 5px;
  /* margin-left: 400px; */
  overflow: hidden;
  cursor: pointer;
}
.ini_box:hover{
  border: 1px solid #1d9cf1;
  box-shadow: 0 0 5px #1d9cf1;
}
.ini_box1:hover{
  border: 1px solid #1d9cf1;
  box-shadow: 0 0 5px #1d9cf1;
}
.box:before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 0;
  height: 12px;
  border-style: solid;
  border-width: 8px 6px 4px;
  border-color: #cacaca transparent transparent;
  background: #e6e6e6;
}
.title{
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #e49b13;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
}
.close{
  font-size: 18px;
  cursor: pointer;
}
.cen{
  display: flex;
  align-items: center;
  height: 70px;
  line-height: 30px;
  padding: 5px;
  box-sizing: border-box;
  background: #fff;
  color: #222;
  cursor: pointer;
}
.cenText{
  width: 200px;
  display: flex;
}
.icon{
  width: 40px;
  text-align: center;
}
.approveName{
  border: none;
  background: #e49b13;
  text-align: left;
}

.CC_lin{
  width: 160px;
  height: 2px;
  background: #ccc;
}
.CC_box{
  width: 240px;
  height: 100px;
  border: 1px solid #ccc;
  /* margin: 0 auto; */
  border-radius: 5px;
  overflow: hidden;
}
.CC .title{
  background: #2c85da;
}
.makeName{
  border: none;
  background: #2c85da;
  text-align: left;
}
.titTab{
  color: #1d9cf1;
  margin: 10px 0 ;
  font-size: 14px;
}
.popText{
  padding-left: 10px;
}
.zz{
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0);
  z-index: 99999;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
</style>